<!--
 * @Description: 背景音乐-列表-弹窗
 * @Date: 2024-11-29 17:08:29
 * @FilePath: \demod:\12electron\electron-demo\src\renderer\src\components\bgMusicListDialog.vue
-->
<template>
  <div class="bg-music-list-dialog">
    <el-dialog v-model="state.dialog.visible" :title="state.dialog.title" width="60%">
      <el-table :data="state.musicList" @row-click="onRowClick">
        <el-table-column property="index" label="序号" width="70" />
        <el-table-column property="name" label="名称" width="300" />
        <el-table-column property="path" label="路径" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const emit = defineEmits(['change']);

const state = reactive({
  dialog: {
    title: '音乐列表',
    visible: false,
  },
  musicList: [],
  currentIndex: 0,
});

const openDialog = (list, index) => {
  if (list?.length) {
    state.musicList = list.map((item, index) => {
      return {
        ...item,
        index: index + 1,
      };
    });
    state.currentIndex = index;
    state.dialog.visible = true;
  } else {
    alert('没有音乐列表');
  }
};

const onRowClick = (row: any) => {
  emit('change', row);
  state.dialog.visible = false;
};

defineExpose({
  openDialog,
});
</script>
